@media screen and (min-width: 768px) {
  #home-page-layout #intro a.download-link {
    display: inline-block;
    background: #CC342D url(/images/download-ruby-arrow@2x.png) no-repeat 8px center;
    background-size: 30px 25px;
    color: white;
    padding: 8px 20px 8px 45px;
    font-size: 16px;
    line-height: 20px;
    text-decoration: none;
    margin: 0 3px 0 0;
    text-shadow: none;
    border: 2px solid #9b1c16;
    font-weight: normal;
    -webkit-border-radius: 6px;
       -moz-border-radius: 6px;
            border-radius: 6px;
    -webkit-box-shadow: 0 2px 0 #9b1c16;
       -moz-box-shadow: 0 2px 0 #9b1c16;
            box-shadow: 0 2px 0 #9b1c16;
  }

  #home-page-layout #intro a.download-link:active {
    background-color: #9b1c16;
    border-color: #760f0a;
  }
}

@media screen and (max-width: 768px) {

  #home-page-layout #code { width: 300px; }
  #home-page-layout #code pre { margin-right: 24px; }
  #sidebar { margin-right: 24px; }

  #content-wrapper { padding: 0 24px; }

  #main img { max-width: 100%; }

  #home-page-layout #intro {
    padding-right: 24px;
    padding-left: 24px;
  }

  #header_content { padding: 20px 24px 0; }

  #header div.site-links {
    padding: 0 0 0 14px;
    margin: 0 -24px;
    -webkit-border-radius: 0;
       -moz-border-radius: 0;
            border-radius: 0;
  }

  #header div.site-links a {
    padding: 8px;
    -webkit-border-radius: 0;
       -moz-border-radius: 0;
            border-radius: 0;
  }

  #search-box { top: 44px; }

  #footer {
    margin: 0;
    border: none;
    border-top: 1px solid #ddd;
    -webkit-border-radius: 0;
       -moz-border-radius: 0;
            border-radius: 0;
  }
}

@media screen and (max-width: 700px) {
  #main,
  #content-wrapper,
  #sidebar-wrapper,
  #home-page-layout #code,
  #home-page-layout #intro,
  #home-page-layout #intro-wrapper {
    display: block;
    width: auto;
  }

  #home-page-layout #code pre {
    margin: 0;
    border: none;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 12px 24px;
    -webkit-box-shadow: none;
       -moz-box-shadow: none;
            box-shadow: none;
    -webkit-border-radius: 0;
       -moz-border-radius: 0;
            border-radius: 0;
  }

  #search-box {
    text-align: left;
    position: static;
    display: none;
    padding: 12px 24px 12px 60px;
    margin: 0 -24px;
    overflow: hidden;
    top: auto;
    right: auto;
    text-align: right;
    background: #585450;
    border-top: 1px solid #7c7874;
  }

  #search-box .fieldset { float: none; }

  #search-form .field { width: 160px; }

  #header div.site-links.open + #search-box { display: block; }

  #header div.site-links {
    padding: 0;
    position: relative;
  }

  #header div.site-links a {
    float: none;
    display: none;
    padding: 12px 24px 12px 80px;
    font-size: 16px;
    border-top: 1px solid #585450;
    border-bottom: 1px solid #585450;
  }

  #header div.site-links.open a,
  #header div.site-links a.menu,
  #header div.site-links a.selected {
    display: block;
  }

  #header div.site-links a.menu {
    background: #585450 url(/images/hamburger@2x.png) no-repeat 50% 50%;
    background-size: 20px 20px;
    width: 68px;
    height: 0;
    padding: 45px 0 0;
    overflow: hidden;
    border: none;
    position: absolute;
    left: 0;
    top: 1px;
  }

  #header div.site-links a + a { border-top-color: #7c7874; }
  #header div.site-links.open a.menu { background-color: #433f3c; }

  #subscriptions-form tr,
  #subscriptions-form td {
    min-width: auto !important;
    width: 100%;
    display: block;
  }

  #subscriptions-form table input {
    width: 94% !important;
    padding: 6px 3% !important;
  }

  #subscriptions-form table input,
  #subscriptions-form table select { margin-left: 0 !important; }

  #sidebar {
    border: none;
    border-top: 1px solid #ccc;
    -webkit-box-shadow: none;
       -moz-box-shadow: none;
            box-shadow: none;
    -webkit-border-radius: 0;
       -moz-border-radius: 0;
            border-radius: 0;
    margin: 24px 0 0;
  }

  div.multi-page a,
  div.multi-page strong {
    padding: 10px 17px;
  }

  #footer { background: #fff; }
  #footer div.site-links { display: none; }
}

@media screen and (max-width: 380px) {
  #header h1 { font-size: 30px; }

  #header h2 {
    font-size: 13px;
    margin: 0;
  }

  #header_content { padding-top: 10px; }

  #header_content > a {
    background-size: 44px 44px;
    background-position: left 10px;
    padding: 15px 0 0 50px;
    margin: 0 0 15px -12px;
  }

  #header div.site-links a.menu { width: 44px; }
  #header div.site-links a { padding-left: 60px; }

  .buttons .button {
    display: block;
    width: 100%;
  }
}
